<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('history')"></head>
<body>
    <!--navigator-->
    <nav th:replace="_fragments :: navigator('history')"></nav>

    <!--main body-->
    <div class="my-padded-tb-l">
        <div class="ui container">
<!--            head-->
            <div class="ui top attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h2 class="ui teal header my-text-spaced">History</h2>
                    </div>
                    <div class="right aligned column my-text-spaced">
                        <h2 class="ui orange header my-inline-block my-text-thin" th:text="${count}"> 144 </h2>&nbsp; blogs in total
                    </div>
                </div>
            </div>
            <th:block th:each="item : ${historyMap}">
            <h2 class="ui center aligned header" th:text="${item.key}">2020</h2>
            <div class="ui fluid vertical menu">
                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
                    <span>
                        <i class="teal small circle icon"></i><span th:text="${blog.title}">A placeholder topic.</span>
                        <div class="ui teal basic left pointing small label" th:text="${#dates.format(blog.updateTime,'MM/dd')}">04/18</div>
                    </span>
                        <div class="ui orange basic left pointing label my-margin-tb-clear" th:text="${blog.flag}">Original</div>
                    </a>
                </div>
            </th:block>



        </div>
    </div>

    <footer th:replace="_fragments :: footer"></footer>
    <div th:replace="_fragments :: basic_scripts"></div>
    <script>
        $("#menu_toggle").click(function () {
            $('.my-menu-item').toggleClass('my-mobile-hide')
        });

        $('#payButton').popup({
            popup : $('#payBlock.popup'),
            on : 'click',
            position: 'bottom center'
        });
    </script>
</body>
</html>